﻿
<template>
  <div class="ad_scroll_full"> 
    <!-- swiper s -->
    <mt-swipe :auto="4000" class="swipe">
      <mt-swipe-item class="slide1" v-for="(list,index) in img_list">
        <img v-bind:src="list.img" v-if="!list.tips" class="list_img_box">
        <div class="tops list_w_box" v-if="list.tips" v-html="list.w_value" ></div>
      </mt-swipe-item>
    </mt-swipe>
    <!-- swiper e -->
  </div>
</template>

<script>
  import '../../static/css/mint-ui/style.css'
  import MintUI from 'mint-ui'
  import {mapState, mapMutations,mapActions,mapGetters} from 'vuex';
  import { Toast, Indicator, MessageBox, Swipe, SwipeItem  } from 'mint-ui';
  import Vue from "vue";
  import filter from "../filter/filter.js"
  Vue.use(MintUI);
  Vue.component(Swipe.name, Swipe);
  Vue.component(SwipeItem.name, SwipeItem);

  export default {
    name: 'scroll_full',
    data() {
      return {
        img_list:[0,0,0,0],
      }
    },
    props: [],
    beforeCreate: function () {
          
    },
    directives: {
      change: {
        // 指令的定义
        inserted: function (el) {
        
        }
      }
    },
    watch: {
   
    },
    methods: {
    
    },
    components: {

    },
    mounted: function () {
     console.log("ad_img_list++++++++++++++++++==");
     console.log(this.$store.getters.get_ad_img_list);
     
     this.img_list = this.$store.getters.get_ad_img_list
    },
    components: {

    }
  }
</script>
<style scoped>
  .ad_scroll_full{
    background-color:#333;
    width:100%;
    height:100%;
  }
  .list_img_box{
    display:block;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:80vw;
    max-height:80%;
  } 
  .swipe {
    background-color: #fff;
    top: 50%;
    position: absolute;
    left: 50%;
    width: 100%;
    transform: translate(-50%,-50%);
    max-height: 100%;
  } 
  .list_w_box {
    width: 100%;
    height: 100%
  } 
  .list_img_box {
    width: 100%;
    height: 100%;
  }
  /*ad_scroll_full*/
  .ad_scroll_full {
    height: 100%;
    width: 100%;
  }
  /*ad_scroll_full*/
  .mint-swipe .mint-swipe-indicators .is-active {
    background: #a36439;
  }
  .mint-swipe-indicator.is-active {
    background: #a36439;
  }
  .mint-swipe-indicator.is-active {

  }
  .mint-swipe-indicator .is-active {
    background: #a36439;
  } 
  @component-namespace page {
    @component swipe {
      @descendent desc {
        text-align: center;
        color: #666;
        margin-bottom: 5px;
      }

      .mint-swipe {
        height: 200px;
        color: #fff;
        font-size: 30px;
        text-align: center;
        margin-bottom: 20px;
      }

      .mint-swipe-item {
        line-height: 200px;
      }

      .slide1 {
        background-color: #0089dc;
        color: #fff;
      }

      .slide2 {
        background-color: #ffd705;
        color: #000;
      }

      .slide3 {
        background-color: #ff2d4b;
        color: #fff;
      }
    }
  }
 
</style>
